<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>免签/落地签</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/common.css" />
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			.mui-content {
				width: 100%;
			}
			.order {
				margin-top: 10px;
				height: 100%;
			}
			.order-list {
				position: relative;
				margin-bottom: 16px;
				background-color: #fff;
				font-size: 14px;
			}
			.order-status {
				padding: 10px 20px;
			}
			.order-status .order-no {
				color: #474546;
			}
			.order-status .status {
				color: #FF4747;
			}
			.order-info {
				background-color: #F9F9F9;
			}
			.order-title {
				padding: 10px 15px;
				border-bottom: 1px solid #D9D8D9;
			}
			.order-title .order-img {
				vertical-align: middle;
				width: 28px;
				height: 18px;
				margin-right: 15px;
			}
			.order-title .order-name {
				vertical-align: middle;
				width: calc(100% - 48px);
				display: inline-block;
				color: #333333;
			}
			.order-user {
				margin-left: 63px;
				padding: 10px 0;
				border-bottom: 1px solid #D9D8D9;
			}
			.order-user:last-child {
				border: none;
			}
			.order-user .user-name {
				margin-right: 15px;
				color: #333333;
			}
			.order-user .user-post {
				color: #999999;
			}
			.order-btn {
				padding: 10px 15px;
				text-align: right;
			}
			.order-btn .mui-btn {
				margin-right: 10px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的订单</h1>
		</header>
		<div class="mui-content">
			<div class="order" id="orderList">
				<!--<div class="order-list">
					<div class="order-status space-between">
						<span class="order-no">订单编号：213889</span><span class="status">待上传资料</span>
					</div>
					<div class="order-info">
						<div class="order-title">
							<img class="order-img" src="../img/index/shuijiao.jpg" />
							<div class="order-name mui-ellipsis">(成都领域)韩国旅游签证-全日制本科以上学了的开始放假了发了卡萨丁</div>
						</div>
						<div class="order-user">
							<span class="user-name">吴京</span><span class="user-post">在职人员</span>
						</div>
					</div>
					<div class="order-btn">
						<button type="button" style="color: #ccc;" class="mui-btn mui-btn-outlined">取消订单</button>
						<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">上传资料</button>
					</div>
				</div>-->
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script type="text/javascript">
		var customerId = base.getParameter("customerId");
		$(function() {
			base.setWait("正在获取数据...");
			getOrderList();
		})
		function getOrderList(){
			base.postData(base.url.getOrderList, {customerId: customerId}, getOrderListSuccess);
		}
		function getOrderListSuccess(data){
			if (data.success) {
				var list = data.extendData.orderInfoList;
				var html = "";
				for (var i=0; i<list.length; i++) {
					html += pingOrder(list[i]);
				}
				$("#orderList").html(html);
			}
		}
		function pingOrder(obj){
			var html = '<div class="order-list">'+
						'	<input type="hidden" name="orderNo" value="'+obj.orderNo+'" />'+
						'	<input type="hidden" name="applyCustomerId" value="'+obj.applyCustomerId+'" />'+
						'	<div class="order-status space-between">'+
						'		<span class="order-no">订单编号：'+obj.orderId+'</span><span class="status">待上传资料</span>'+
						'	</div>'+
						'	<div class="order-info">'+
						'		<div class="order-title">'+
						'			<img class="order-img" src="'+obj.countryImg+'" />'+
						'			<div class="order-name mui-ellipsis">'+obj.goodsName+'</div>'+
						'		</div>'+
						'		<div class="order-user">'+
						'			<span class="user-name">'+obj.applyCustomerName+'</span><span class="user-post">'+obj.dataTypeName+'</span>'+
						'		</div>'+
						'	</div>'+
						'	<div class="order-btn">'+
						'		<button type="button" style="color: #ccc;" class="mui-btn mui-btn-outlined delete-order">取消订单</button>'+
						'		<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined upload-data">上传资料</button>'+
						'	</div>'+
						'</div>';
			return html;
		}
		$("#orderList").on('tap', '.delete-order', function(e){
			e.stopPropagation();
			var orderNo = $(this).closest(".order-list").find("input[name='orderNo']").val();
			base.postData(base.url.deleteOrder, {orderNo: orderNo}, deleteOrderSuccess);
		});
		function deleteOrderSuccess(data){
			mui.toast(data.message);
			if (data.success) {
				getOrderList();
			}
		}
		$(".order").on('tap', '.order-list', function(){
			var _orderNo = $(this).find("input[name='orderNo']").val();
			parent.location.href = "orderInfo.html?customerId="+customerId+"&orderNo="+_orderNo;
		});
		$(".order").on('tap', '.upload-data', function(e){
			e.stopPropagation();
			var _orderNo = $(this).closest(".order-list").find("input[name='orderNo']").val();
			var _applyCustomerId = $(this).closest(".order-list").find("input[name='applyCustomerId']").val();
			parent.location.href = "dataUpload.html?customerId="+customerId+"&orderNo="+_orderNo+"&applyCustomerId="+_applyCustomerId;
		});
	</script>
</html>